<template>
    <div id="app">

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1500px;height:600px;"></div>
</div>
</template>

<script>
export default {
  data() {//date数据
    return {
        yearMonth:'',
        xdata:[],//定义x轴数据集合
        ydataAddCount:[], //y轴添加日志数据
        ydataUpdateCount:[], //y轴添加日志数据
        ydataDelCount:[], //y轴添加日志数据
    }
  },
  created: function () { //初始化方法 类似于jquery  $({})
      //给当前日期选择框初始化日期为当前月
      let date = new Date();
      this.yearMonth=date.getFullYear()+'-'+((date.getMonth())<10?'0'+(date.getMonth()-1):(date.getMonth()+1));
      //在初始化时，调用加载数据方法
      this.loadData();
  },
  methods: { //使用的所有方法
      //封装加载数据的方法   初始化和年月发生改变时，都可以调用
      loadData(){
          //使用axios发请求到后台方法
          var _this = this;
          //赋值 axios官网代码
          _this.$http
          .post('/main/siteoperlog/siteoperlog?monthDay='+this.yearMonth)  //指定请求的url及参数  get
              .then(function (response) {  //正确返回对象的处理

                  if(response.data.code==2000){
                    //当加载数据方法请求正确时，执行echarts显示
                    //给图片中的数据动态赋值
                    let jsonDataList  = response.data.data[0];
                      let jsonDataList1  = response.data.data[1];
                      let jsonDataList2  = response.data.data[2];
                    //因为有缓存，每次重新执行后，都要把原来数据清空
                    _this.xdata=[];
                    _this.ydataAddCount=[];
                    _this.ydataUpdateCount=[];
                    _this.ydataDelCount=[];
                    // jsonDataList = [{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3},{"monthDay":"05-02","addCount":1,"updateCount":2,"delCount":1},{"monthDay":"05-03","addCount":0,"updateCount":2,"delCount":1},{"monthDay":"05-04","addCount":1,"updateCount":0,"delCount":0}]
                    for (let i = 0; i < jsonDataList.length; i++) {
                      //拿出循环的每个对象给jsonDataListElement
                      let jsonDataListElement = jsonDataList[i];//第1次：{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3} 。。。
                      //给xdata  ydata ...赋值
                      _this.xdata.push(jsonDataListElement.operTime);
                      _this.ydataDelCount.push(jsonDataListElement.cthree);
                    }
                      for (let i = 0; i < jsonDataList1.length; i++) {
                          //拿出循环的每个对象给jsonDataListElement
                          let jsonDataListElement1 = jsonDataList1[i];//第1次：{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3} 。。。
                          //给xdata  ydata ...赋值
                          _this.ydataUpdateCount.push(jsonDataListElement1.ctwo);
                      }
                      for (let i = 0; i < jsonDataList2.length; i++) {
                          //拿出循环的每个对象给jsonDataListElement
                          let jsonDataListElement2 = jsonDataList2[i];//第1次：{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3} 。。。
                          //给xdata  ydata ...赋值
                          _this.ydataAddCount.push(jsonDataListElement2.cone);
                      }
                    //显示图表
                    _this.drawChart();
                  }
              })
      },
      //年月发生变化时的方法
      changeMonth(v) {
          // alert(v);
          let year = v.getFullYear();
          let month = v.getMonth()+1;
          this.yearMonth = year+'-'+(month<10?('0'+month):month);
          // alert(this.yearMonth);
          //月发生变化时，给yearMonth重新赋值后，再次执行加载数据方法
          this.loadData();
      },
      //显示图表方法
      drawChart() {
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('main'));

          // 指定图表的配置项和数据
          var option = {
              title: {
                  text: '日志操作统计',
                  subtext: 'Fake Data'
              },
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['添加操作', '更新操作', '删除操作']
              },
              toolbox: {
                  show: true,
                  feature: {
                      dataView: { show: true, readOnly: false },
                      magicType: { show: true, type: ['line', 'bar'] },
                      restore: { show: true },
                      saveAsImage: { show: true }
                  }
              },
              calculable: true,
              xAxis: [
                  {
                      type: 'category',
                      // prettier-ignore
                      data: this.xdata
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series: [
                  {
                      name: '添加操作',
                      type: 'line',
                      data:  this.ydataAddCount,
                      markPoint: {
                          data: [
                              { type: 'max', name: 'Max' },
                              { type: 'min', name: 'Min' }
                          ]
                      },
                      markLine: {
                          data: [{ type: 'average', name: 'Avg' }]
                      }
                  },
                  {
                      name: '更新操作',
                      type: 'line',
                      data: this.ydataUpdateCount,
                      markPoint: {
                          data: [
                              { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                              { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                          ]
                      },
                      markLine: {
                          data: [{ type: 'average', name: 'Avg' }]
                      }
                  },
                  {
                      name: '删除操作',
                      type: 'line',
                      data: this.ydataDelCount,
                      markPoint: {
                          data: [
                              { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                              { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                          ]
                      },
                      markLine: {
                          data: [{ type: 'average', name: 'Avg' }]
                      }
                  }

              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
      }
  }
};
</script>